<template>
  <div class="cn-title-block-wrapper">
    <div class="cn-title-block">
      <div :style="cnBlockContainerStyle">
        <div>
          <div>
            <span>{{ block.content }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CSSProperties, PropType, toRefs } from 'vue';
import { type CnBlock } from '../types';
import { getAlign } from '../util';

const props = defineProps({
  block: {
    type: Object as PropType<CnBlock>,
    required: true,
  },
});
const { block } = toRefs(props);

const cnBlockContainerStyle = computed((): CSSProperties => {
  return { display: 'flex', fontSize: fontSize.value, justifyContent: getAlign(block.value.style) };
});

const fontSize = computed(() => {
  switch (block.value.type) {
    case 3: // 标题 1
      return '26px';
    case 4: // 标题 2
      return '22px';
    case 5: // 标题 3
      return '20px';
    case 6: // 标题 4
      return '18px';
    default:
      return '16px';
  }
});
</script>
